<template>
  <view>
    <!-- 0. 收货地址 -->
    <my-address></my-address>
    <!-- 1. 购物车标题区 -->
    <view class="cart-title">
      <uni-icons type="shop" size="17"></uni-icons>
      <text>购物车</text>
    </view>
    <!-- 2. 购物车的数据列表 -->
    <view class="cart-list">
      <uni-swipe-action>
        <block v-for="(goods,i) in cart">
          <uni-swipe-action-item :options="options" @click="swiperActionHandler(goods)">
            <my-goods :goods="goods" :showRadio="true" @radio-change="changeState" :showNum="true"
              @num-change="numChangeHandler"></my-goods>
          </uni-swipe-action-item>
        </block>
      </uni-swipe-action>
    </view>
    <!-- 3. 结算区 -->
    <my-settle class="cart-settle"></my-settle>
  </view>
</template>
  
<script>
  // 引入混入的数据
  import mixInBadge from "@/mixins/tabbar-badge.js"
  // 引入购物车数据
  import {
    mapState,
    mapMutations
  } from "vuex"
  export default {
    mixins: [mixInBadge],
    computed: {
      // 引入购物车数据
      ...mapState("m_cart", ['cart']),
    },
    data() {
      return {
        options: [{
          text: '删除', // 显示的文本内容
          style: {
            backgroundColor: '#C00000' // 按钮的背景颜色
          }
        }]
      };
    },
    methods: {
      // 引入方法
      ...mapMutations("m_cart", ["upateGoodsState", "updateGoodsCount","removeGoodsFromCart"]),
      changeState(goods) { // goods参数：由子组件传入的值
        console.log("由子组件触发：", goods)
        this.upateGoodsState(goods)
      },
      // 当点击数字框时触发的事件处理函数
      numChangeHandler(e) {
        console.log("父组件取得子组件传入的值:", e)
        this.updateGoodsCount(e)
      },
      // 删除某个购物项
      swiperActionHandler(goods){
        console.log("goods:",goods)
        // 从购物车中删除指定商品
        this.removeGoodsFromCart(goods.goods_id)
      }
    }
  }
</script>

<style lang="scss">
  .cart-title {
    height: 40px;
    display: flex;
    align-items: center;
    margin-left: 3px;
    border-bottom: 1px solid #ddd;

    text {
      margin-left: 10px;
    }
  }
.cart-list{
  padding-bottom:50px;
}
</style>